<template>
  <div class="page-bg">
    <listTable
      ref="tableRef"
      v-model="tableData"
      :is-check="false"
      @getList="getList"
      sortField="sort"
      :pageSizes="[50]"
    >
      <el-table-column prop="id" sortable="custom" label="ID" width="80" />
      <el-table-column prop="cn_name" label="页面名称">
        <template #default="scope">
          <template v-if="scope.row.pid">
            |—— {{ scope.row.cn_name }}
          </template>
          <template v-else>
            {{ scope.row.cn_name }}
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="url" label="链接" />
      <el-table-column label="banner" width="230">
        <template #default="scope">
          <el-image
            v-if="scope.row.img"
            style="width: 200px;"
            :preview-src-list="[config.serverImg + scope.row.img]"
            :src="config.serverImg + scope.row.img"
            fit="contain"
            preview-teleported
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="pid" label="上级页面ID" width="150" align="center">
        <template #default="scope">
          {{ scope.row.pid ? scope.row.pid : "-" }}
        </template>
      </el-table-column>
      <el-table-column
        prop="sort"
        label="排序"
        width="90"
        align="center"
        sortable="custom"
      />
      <el-table-column
        align="center"
        width="100"
        label="状态"
        :filters="[
          { text: '显示', value: '1' },
          { text: '隐藏', value: '0' },
        ]"
        :filter-method="filterTag"
        filter-placement="bottom-end"
      >
        <template #default="scope">
          <el-tag v-if="scope.row.a_show == '1'" type="success">显示</el-tag>
          <el-tag v-else type="info">隐藏</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="更新时间" width="180">
        <template #default="scope">
          {{ dayjs(scope.row.up_time * 1000).format("YYYY-MM-DD HH:mm:ss") }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作栏" width="150" align="center">
        <template #default="scope">
          <el-button
            link
            type="primary"
            size="small"
            @click="router.push('/pages/edit?id=' + scope.row.id)"
            >编辑</el-button
          >
          <a :href="config.domain + scope.row.url" target="_blank">
            <el-button link type="primary" size="small">预览页面</el-button>
          </a>
        </template>
      </el-table-column>
    </listTable>
  </div>
</template>

<script lang="ts" setup>
import { listTable, typeColumn } from "@/components/listPage";
import { tableDataType, tableDataQuery } from "@/common/interface";
import { post } from "@/common/http";
import config from "@/common/config";
import dayjs from "dayjs";

const tableRef = ref();

const router = useRouter();

interface listItem {
  id: number;
  title: string;
  a_show: string;
}

//表格组件数据
const tableData = reactive<tableDataType<listItem>>(new tableDataType());

//获取列表
function getList(data: tableDataQuery): void {
  post("api/Page/get_list", {
    page: data.page,
    limit: data.limit,
    type: 0,
    keyWord: "",
    sortField: data.sortField, //需要排序的字段
    sort: data.sort, //desc asc
  }).then((res) => {
    tableData.lists = res.data.list;
    tableData.types = res.data.type;
    tableData.total = res.total ?? 0;
    tableData.loading = false;
  });
}

//筛选当前页数据的 状态
const filterTag = (value: string, row: listItem) => {
  return row.a_show === value;
};
</script>

<style lang="scss" scoped></style>
